<template>
  <div class="link-topic click cursor-pointer mb-24">
    <mx-link :to="`/m/topic/${obj.subjectId}`">
      <div class="header mb-12">
        <div class="point mr-8"></div>
        <p class="title">{{$t('related_topics')}}</p>
      </div>
      <div class="detail">
        <t-image :src="obj.headImg" alt="" class="cover img-cover mr-12" />
        <div>
          <p class="name ov-1">{{ obj.subjectTitle }}</p>
          <p class="num">{{ obj.contentCount }}{{$t('xxx_content')}}</p>
        </div>
        <icon class="arrow ml-auto" size="16px" name="ic_arrow_right_red"/>
      </div>
    </mx-link>
  </div>
</template>

<script>
import TImage from './TImage.vue';
export default {
  components: { TImage },
  props: {
    obj: {
      type: Object,
      default: () => {}
    }
  }
};
</script>

<style lang="scss" scoped>
.link-topic {
  background: #ffffff;
  border: 0.5px solid rgba(12, 12, 28, 0.2);
  border-radius: 8px;
  padding: 16px;

  .header {
    height: 24px;
    display: flex;
    align-items: center;
    .point {
      background: #fa4646;
      border-radius: 2px;
      width: 4px;
      height: 16px;
    }

    .title {
      font-size: 16px;
      color: #0c0c1c;
    }
  }

  .detail {
    display: flex;
    align-items: center;
    height: 48px;

    .cover {
      width: 48px;
      height: 48px;
      border: 0.5px solid rgba(42, 60, 88, 0.1);
      border-radius: 8px;
    }

    .name {
      font-size: 16px;
      color: #0c0c1c;
      letter-spacing: 0;
      line-height: 22px;
    }

    .num {
      font-size: 12px;
      color: rgba(12, 12, 28, 0.7);
      letter-spacing: 0;
      line-height: 16px;
    }
  }
}
</style>
